<template>
    <div class="works-upload-container">
        <i-form ref="model" :model="model" :rules="ruleValidate">
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="调解地点" prop="location">
                        <i-input v-model="model.location"  placeholder="请输入调解地点"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="11">
                    <Form-item label="调解人员" prop="users_id">
                        <i-select v-model="model.users_id" style="width: 100%"
                                  :clearable="true"
                                  placeholder="请选择调解组织">
                            <i-option v-for="item in mediators" :value="item.value"
                                      :key="item.value">{{item.label}}
                            </i-option>
                        </i-select>
                    </Form-item>
                </i-col>
                <i-col span="11" offset="2">
                    <Form-item label="调解时间" prop="time">
                        <DatePicker  :editable="false" format="yyyy-MM-dd HH:mm:ss"  style="width: 100%" type="datetime" v-model="model.time" placeholder="请输入调解时间"></DatePicker>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="被调解人" prop="parties">
                        <i-input v-model="model.parties" type="textarea" placeholder="请输入被调解人"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="调解过程记录" prop="process">
                        <i-input v-model="model.process" type="textarea" placeholder="请输入调解过程记录"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="调解结果" prop="result">
                        <i-input v-model="model.result" type="textarea" placeholder="请输入调解结果"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <div class="pull-right">
                        <i-button type="primary" @click="onPrev" :disabled="nextDisabled">上一步</i-button>
                        <i-button type="primary" @click="onNext" :disabled="nextDisabled">下一步</i-button>
                    </div>
                </i-col>
            </Row>
        </i-form>
    </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    props: {
      caseId: {
        type: [Number,String],
        default: 0
      },
      stateManager: {
        type: Object
      }
    },
    data () {
      return {
        loading: false,
        model: this.$modelDataSource({
          url: '/api/mediation-record',
          dataKey: 'model',
          attributes: {
            id: 0,
            location: '',
            users_id: '',
            time:'',
            parties:'',
            process:'',
            result:'',
          }
        }),
        ruleValidate: {
          location: [
            {required: true, message: '请填写调解地点', trigger: 'blur'}
          ],
          time: [
            {required: true,type:'object', message: '请填写调解时间', trigger: 'change'}
          ],
          users_id: [
            {required: true,type: 'number' , message: '请填写调解人员', trigger: 'change'}
          ],
          parties: [
            {required: true, message: '请填写被调解人', trigger: 'blur'}
          ],
          process: [
            {required: true, message: '请填写调解过程记录', trigger: 'blur'}
          ],
          result: [
            {required: true, message: '请填写调解结果', trigger: 'blur'}
          ],
        },
        nextDisabled: false
      }
    },
    created () {
      let self = this
      this.$store.dispatch('fetchMediatorList')
      if(this.caseId){
        this.model.fetch(this.caseId, {}, function () {
          self.stateManager.buttonLoading = false;
          self.stateManager.editDialogVisible = true;
        }, function () {
          self.stateManager.buttonLoading = false;
        });
      }
    },
    methods: {
      onNext (e) {
        let self = this;
        self.$refs['model'].validate((valid) => {
          if (valid) {
            self.model.case_id = self.caseId
            self.model.uuid = self.model.id
            self.model.time = new Date(self.model.time).format("yyyy-MM-dd hh:mm:ss")
            console.log('表单验证通过');
            self.model.save(function () {
              self.$Notice.success({
                title: '保存成功',
              });
              self.$emit('next',self.caseId)
            }, function () {
            });
          } else {
            console.log('表单验证失败');
      }
      });
      },
      onPrev (e) {
        this.$emit('prev', this.caseId)
      },

    },
    computed: {
      mediators () {
        return this.$store.state.mediators;
      },
    }
  }
</script>
